{% extends 'base.html' %}

{% block navbar %}

    <nav class="navbar navbar-default">
        <div class="container">

            <ul class="nav nav-pills nav-justified">
                <li role="presentation"><a href="http://127.0.0.1:5000/entry">天气查询</a></li>
                <li role="presentation"class="active"><a href="http://127.0.0.1:5000/traffic">路况查询</a></li>
                <li role="presentation"><a href="http://127.0.0.1:5000/blog">出行笔记</a></li>
                <li role="presentation"><a href="http://127.0.0.1:5000/viewlog">系统日志</a></li>
            </ul>

        </div>
    </nav>
{% endblock %}

{% block app_content %}

<div class="page-header">
    <h1>路况查询 <small>How‘s the road today？</small></h1>
</div>

<div style="width:600px; margin: 50px auto;">
    <div class="panel panel-primary">

        <div class="panel-body" style="color: white">
                     <div style="margin: 90px auto;width: 500px">
                         <div>
                             <h4 style="color: black">
                                 请输入需要查询路段：
                             </h4>
                         </div>

                        <form method="post" action="/get_traffic">

                            <input type="text" required="required" name="name" id="name" class="form-control" placeholder="例如：白云大道北" required autofocus>
                            <input type="text" required="required" name="now_city" id="now_city" class="form-control" placeholder="例如：广州市" required autofocus>
                            <button class="btn btn-lg btn-primary btn-block" type="submit">查询</button>
                        </form>
                         <div style="height: 60px"></div>
                        <p style="margin: auto;width:400px;color: dimgray">
                            目前支持城市：北京，上海，广州，深圳，宁波，武汉，重庆，成都，沈阳，南京，杭州，长春，常州，大连，东莞，福州，青岛，石家庄，天津，太原，西安，无锡，厦门，珠海，长沙，苏州，金华，佛山，济南，泉州，嘉兴，西宁，惠州，温州，中山，合肥，乌鲁木齐，台州，绍兴，昆明。
                        </p>
                         <div style="height: 20px"></div>
                        <p style="text-align:right;width:500px;color: indianred">
                            (如跳转无法到结果页，请检查输入地点名称是否符合要求)
                        </p>
                     </div>


        </div>
    </div>

</div>



{% endblock %}